<style lang="scss">
$left: 32rpx;
$concave-wh: 20rpx;
$concave-color: #F6F3F7;

.order-item {
	margin: 0 30rpx;
	background-color: #FFF;
	border-radius: 20rpx;
}

.order-item-studios {
	$height: 28rpx;
	height: $height;
	line-height: $height;
	font-size: $height;
	margin: 0 $left;
	padding: 34rpx 0 17rpx 0;
}

.order-item-concave {
	height: $concave-wh;
	position: relative;
	display: flex;
	align-items: center;
}

.order-item-concave-c {
	width: 100%;
	border-top: 2rpx dashed $concave-color;
}

.order-item-concave-l, .order-item-concave-r {
	width: $concave-wh;
	height: $concave-wh;
	border-radius: $concave-wh;
	background-color: $concave-color;
	position: absolute;
}

.order-item-concave-l {
	left: -($concave-wh / 2);
}

.order-item-concave-r {
	right: -($concave-wh / 2);
}

.order-item-film {
	margin-top: 20rpx;
	margin-left: $left;
	display: flex;
}

.order-item-film-thumb {
	width: 127rpx;
	height: 173rpx;
	border-radius: 10rpx;
}

.order-item-film-left {
	min-width: 0;
	flex: 1;
	margin: 0 26rpx;
}

.order-item-film-name {
	$height: 32rpx;
	height: $height;
	line-height: $height;
	font-size: $height;
	font-weight: bold;
	margin-top: 7.6rpx;
}

.order-item-film-number {
	display: inline-block;
	margin-left: 20rpx;
}

.order-item-film-time, .order-item-film-room {
	$height: 28rpx;
	height: $height;
	line-height: $height;
	font-size: $height;
	color:rgba(0, 0, 0, .5);
}

.order-item-film-time {
	margin-top: 35rpx;
}

.order-item-film-room {
	margin-top: 12rpx;
}

.order-item-footer {
	min-width: 0;
	height: 88rpx;
	margin: 32.7rpx 0 0 $left;
	padding-right: 35rpx;
	border-top: 2rpx dashed rgba(0, 0, 0, .1);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.order-item-total-price, .order-item-state {
	flex: 1;
	font-size: 28rpx;
}

.order-item-state {
	color:rgba(0, 0, 0, .3);
	text-align: right;
}
</style>

<template>
<view class="order-item" @click="onClick">

	<!-- 头部 -->
	<view class="order-item-studios ellipsis"><text v-text="studiosName"/>（<text v-text="address"/>）</view>

	<!-- 圆角分割线 -->
	<view class="order-item-concave">
		<view class="order-item-concave-l"></view>
		<view class="order-item-concave-c"></view>
		<view class="order-item-concave-r"></view>
	</view>

	<view class="order-item-film">
		<!-- 电影封面 -->
		<image class="order-item-film-thumb" :src="thumb" mode="aspectFill"></image>

		<view class="order-item-film-left">

			<view class="order-item-film-name ellipsis">
				<!-- 电影名称 -->
				<text v-text="name"></text>
				<!-- 张数 -->
				<text class="order-item-film-number" v-text="number"></text>张
			</view>

			<!-- 时间 -->
			<view class="order-item-film-time ellipsis" v-text="time"></view>

			<view class="order-item-film-room ellipsis">
				<!-- 房间 -->
				<text v-text="room"></text>
				<text decode space="nbsp" style="padding: 0 10rpx;">丨</text>
				<!-- 座位 -->
				<text decode space="nbsp" v-text="seat"></text>
			</view>

		</view>
	</view>

	<view class="order-item-footer">

		<view class="order-item-total-price ellipsis">总价：<text v-text="totalPrice"/>元</view>

		<view class="order-item-state ellipsis">已完成</view>
	</view>

</view>
</template>

<script>
export default {

	props: {
		// 影城名称
		studiosName: {
			type: String,
			required: true,
		},

		// 影城地址
		address: {
			type: String,
			required: true,
		},

		// 电影图片
		thumb: {
			type: String,
			required: true,
		},

		// 电影名称
		name: {
			type: String,
			required: true,
		},

		// 张数
		number: {
			type: Number,
			required: true,
		},

		// 时间
		time: {
			type: String,
			required: true,
		},

		// 房间
		room: {
			type: String,
			required: true,
		},

		// 座位
		seat: {
			type: String,
			required: true,
		},

		// 总价
		totalPrice: {
			type: Number,
			required: true,
		},
	},

	methods: {

		onClick() {
			this.$emit("click");
		}

	}
}
</script>